<template>
  <view class="meeting-scoring">
    <uni-forms :modelValue="formState" ref="form">
      <view class="meeting-scoring-main" v-for="(item, index) in formState.list" :key="index">
        <view class="meeting-scoring-main-hd">
          <view>{{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }}</view>
          <text>{{ item.content }}</text>
        </view>
        <view>
          <text>评价标准：</text>
          <text>{{ item.standard }}</text>
        </view>
        <view>
          <text>扣分上限：</text>
          <text>{{ item.maxDeductMarks || 0 }}分</text>
        </view>
        <view style="margin-bottom: -8rpx">
          <uni-forms-item class="form-item" :name="['list', index, 'problemDescription']" label="问题描述:">
            <textarea
              v-model="formState.list[index].problemDescription"
              class="text-area"
              placeholder="请输入问题描述"
              :maxlength="200"
            />
          </uni-forms-item>
        </view>
        <view style="margin-bottom: -8rpx">
          <uni-forms-item class="form-item" :name="['list', index, 'deductScore']" label="扣分处罚:">
            <view class="form-item-row">
              <uni-easyinput
                class="text-input"
                :inputBorder="false"
                :clearable="false"
                type="number"
                :maxlength="6"
                v-model="formState.list[index].deductScore"
                placeholder="请输入扣分处罚"
                @blur="onBlur(index, 0)"
              />
              <text> 分</text>
            </view>
          </uni-forms-item>
        </view>
      </view>
    </uni-forms>
    <view class="submit" @click="handleSubmit">确定</view>
  </view>
</template>
<script>
import { getPreClassMeetingScoreConfigList, doScore } from '@/api/duty-basic/duty-meeting'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
export default {
  data() {
    return {
      formState: {
        list: []
      },
      procTaskId: '',
      meetingId: ''
    }
  },
  components: { CuCell, CuCellGroup },
  methods: {
    async handleSubmit() {
      await this.$refs.form.validate()
      const itemList = this.formState.list.map((item) => ({
        deductScore: item.deductScore,
        problemDescription: item.problemDescription,
        scoreConfigId: item.scoreConfigId
      }))
      if (itemList.filter((item) => item.deductScore > 0 && !item.problemDescription)?.length) {
        uni.showToast({
          icon: 'none',
          title: '扣分处罚大于0时问题描述必填'
        })
        return
      }

      uni.showModal({
        content: '提交后，填写的内容将不可以修改，请确定填写无误后再提交',
        confirmText: '确定',
        success: async (res) => {
          if (res.confirm) {
            await doScore({
              itemList,
              meetingId: this.meetingId,
              procTaskId: this.procTaskId
            })

            uni.showToast({
              title: '提交成功！',
              icon: 'success',
              duration: 2000,
              success() {
                uni.navigateBack()
              }
            })
          }
        }
      })
    },
    onBlur(index, min = 0) {
      const val = isNaN(Number(this.formState.list[index].deductScore))
        ? 0
        : Number(this.formState.list[index].deductScore)
      const max = isNaN(Number(this.formState.list[index].maxDeductMarks))
        ? 0
        : Number(this.formState.list[index].maxDeductMarks)
      if (val < min) {
        this.formState.list[index].deductScore = min
      } else if (val > max) {
        this.formState.list[index].deductScore = max
      }
    },
    async getConfig() {
      const { data = [] } = await getPreClassMeetingScoreConfigList()
      this.formState.list = data.map((item) => ({ ...item, problemDescription: '', deductScore: 0 }))
    }
  },
  onLoad({ procTaskId, id }) {
    this.meetingId = id
    this.procTaskId = procTaskId
    this.getConfig()
  }
}
</script>
<style scoped lang="scss">
.meeting-scoring {
  background: rgb(245, 245, 245);
  margin-top: 30rpx;

  .meeting-scoring-main {
    min-height: 342rpx;
    background: #ffffff;
    opacity: 1;
    box-sizing: 30rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 30rpx;
    font-size: 28px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 30rpx;
    box-sizing: border-box;

    .form-item {
      width: 100%;

      & ::v-deep .uni-forms-item__label {
        width: 140rpx !important;
        padding-right: 0 !important;
        color: #999999;
      }
    }

    .easyinput {
      height: 20rpx;
    }

    & > view {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;

      & text:first-child {
        color: #999999;
      }

      & text:last-child {
        display: inline-block;
        flex: 1;
        word-break: break-all;
      }
    }

    .meeting-scoring-main-hd {
      font-size: 34rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;

      & view {
        width: 52rpx;
        height: 52rpx;
        background: #88b4c4;
        opacity: 1;
        border-radius: 50%;
        font-size: 30rpx;
        color: #ffffff;
        text-align: center;
        line-height: 52rpx;
        overflow: hidden;
        margin-right: 18rpx;
      }

      & text {
      }
    }
  }

  & .meeting-scoring-main:last-child {
    margin-bottom: 0;
  }

  .meeting-scoring-active {
    color: #c87c32;
  }

  .submit {
    width: 600rpx;
    height: 88rpx;
    background: #454a5e;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    opacity: 1;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    font-weight: 400;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 70rpx;
    margin-bottom: 70rpx;
  }

  .text-area {
    height: 130rpx;
  }

  .text-input {
    background: #f5f5f5;
    color: #333;
    border-radius: 5rpx;
    flex: 1;
    padding: 0;
    height: 100% !important;

    & ::v-deep .uni-easyinput__content {
      background: #f5f5f5 !important;
      border-radius: 10rpx;
    }
  }

  .form-item-row {
    display: flex;
    align-items: center;

    & > text {
      flex: none !important;
      padding-left: 20rpx;
    }
  }
}
</style>
